<template>
	<view class="container">
		<view class="tab_box" >
			<view class="order_type_tab_box">
				<view :class="['order_type_tab_head',item.status==data.status? 'order_type_tab_head_active':'']"
					@click="tabChange(item)" v-for="(item,index) in tabStatus" :key="index">
					<view class="type_text">{{item.name}}</view>
					<view class="active_type"></view>
				</view>
			</view>
		</view>
		<view v-if="data.status==1">
			<view class="content" v-if="data.list&&data.list.length>0">
				<view class="list_box" @click="goDetails(item.id)" v-for="(item,index) in data.list" :key="index">
					<view class="lf list_text">
						<image class="bank_img" :src="item.receiverBankLogo"></image>
						<view class="bank_width">
							<view class="xjs-size-32 linehei1">提现到{{item.receiverBankName.split(',')[0]}}(*****{{item.receiverBankAccount.substring(item.receiverBankAccount.length-4)}})</view>
							<view class="time_text linehei1">{{item.createTime}}</view>
						</view>
					</view>
					
					<view class="xjs-weight-bold active_box">
						<view class="xjs-size-32 ">¥{{item.amount}} </view>
						<view class="xjs-mt-16 xjs-size-28 btn-color" v-if="item.tradeStatus===0||item.tradeStatus===1">待审核</view>
						<view class="xjs-mt-16 xjs-size-28" v-if="item.tradeStatus==2">提现成功</view>
						<view class="xjs-mt-16 xjs-size-28 btn-color1" v-if="item.tradeStatus==3">提现失败</view>
					</view>
				</view>
			</view>
			<view class="noRecord" v-if="data.loading">
				暂无提现记录～
			</view>
		</view>
		<view v-else>
			<view class="top_box">
				<view>
					<view class="xjs-text-center xjs-size-40 xjs-weight-bold">¥ {{studioBalance?.waitAmount}}</view>
					<view class="top_text">待提现审核(元)</view>
				</view>
				<view class="center_box"></view>
				<view>
					<view class="xjs-text-center xjs-size-40 xjs-weight-bold">¥ {{studioBalance?.successAmount}}</view>
					<view class="top_text">已提现收益(元)</view>
				</view>
			</view>
			<view class="xjs-ml-32 xjs-mb-48 lf">
				<view @click="activeBtn('1')" class=" xjs-mr-16" :class="data.act==1?'all_btn':'active_btn'">全部申请</view>
				<view @click="activeBtn('2')" :class="data.act==2?'all_btn':'active_btn'">待您处理({{studioCount}})</view>
			</view>
			<view class="withdrawalList" v-if="data.list&&data.list.length>0" @click="goDetails(item.id)" v-for="(item,index) in data.list" :key="index">
				<view class="withdrawal_user">
					<view class="lf">
						<image class="withdrawal_user_img" :src="item.avatar"></image>
						<view>
							<view class="xjs-size-32 xjs-weight-bold">{{item.realName}}</view>
							<view class="withdrawal_user_name">{{item.nickName}}</view>
						</view>
					</view>
					<view v-if="item.tradeStatus===0" class="handle_btn">去处理</view>
				</view>
				<view class="xjs-ml-32 xjs-mr-32 xjs-pt-32 xjs-pb-40 xjs-size-28">
					<view class="lf lf-between">
						<view class="color_text">提现到{{item.receiverBankName.split(',')[0]}}(*****{{item.receiverBankAccount.substring(item.receiverBankAccount.length-4)}})</view>
						<view>¥{{item.amount}}</view>
					</view>
					<view class="lf lf-between xjs-mt-32 xjs-mb-32">
						<view class="color_text">提现时间</view>
						<view>{{item.createTime}}</view>
					</view>
					<view class="lf lf-between">
						<view class="color_text">提现状态</view>
						<view v-if="item.tradeStatus===0||item.tradeStatus===1">待审核</view>
						<view v-if="item.tradeStatus==2">提现成功</view>
						<view v-if="item.tradeStatus==3">提现失败</view>
					</view>
				</view>
			</view>
			<view class="noRecord" v-if="data.loading">
				暂无记录～
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue';
	import { onLoad ,onShow,onReachBottom} from '@dcloudio/uni-app'
	import api from '@/api'
	const tabStatus = reactive([
		{ name: '工作室', status: '1' },
		{ name: '团队成员', status: '2' },
	])
	const studioBalance = ref({})
	const studioCount = ref({})
	let data = reactive<any>({
		list:[],
		page:1,
		limit:10,
		status:'1',
		act:'1',
		studioId:'',
		type:'',
		loading: false,
		finished: false,
	})	
	const tabChange = async(item : any)=>{
		data.status = item.status
		data.page = 1
		data.list = []
		getList()
	}
	const activeBtn = async(num : any)=>{
		data.act = num
		data.page = 1
		data.list = []
		getList()
	}
	const getStudioBalance = async () => {
		const res : any = await api({
			method: 'get',
			url: `/mall/studio/studio-balance-withdraw-record-new/getStudioUserAmount`,
			data:{studioId:data.studioId}
		})
		studioBalance.value = res.data
	}
	const waitCount = async () => {
		const res : any = await api({
			method: 'get',
			url: `/mall/studio/studio-balance-withdraw-record-new/waitCount`,
			data:{studioId:data.studioId}
		})
		studioCount.value = res.data
	}
	
	const getList =async()=>{
		uni.showLoading({
		  title: '加载中',
		  mask: true
		}) 
		const res : any = await api({
			method: 'get',
			url: `/mall/studio/studio-balance-withdraw-record-new/page`,
			data:{
				studioId:data.studioId,
				type:data.status==2?'3':'1',
				tradeStatus:data.act==2?'0':'',
				page:data.page,
				limit:data.limit
			}
		})
		uni.hideLoading()
		if (res.data.records.length != 0) {
			data.list = data.list.concat(res.data.records);
			data.finished = true
		}else{
			data.finished = false
		}
		if (data.list.length <= 0) {
			data.loading = true
		}
		
	}
	const goDetails = (id: any)=>{
		uni.navigateTo({
			url:`/pages/income/recordDateils/index?id=${id}&type=${data.type}`
		})
	}
	// 触底
	onReachBottom(() => {
	  if (data.finished && !data.loading) {
	  	data.page++
	  	getList()
	  }
	})
	onShow(() => {
		//data.status = 1
		data.page = 1
		data.list = []
		getStudioBalance()
		waitCount()
		getList()
	})
	onLoad((e) => {
		data.type = e.type
		if(e.status) {
			data.status = e.status
		}
		data.studioId = e.studioId
		
	})
</script>

<style lang="scss" scoped>
	.container{
		padding-bottom: var(--safe-area-bottom);
		// #ifdef APP
		padding-bottom: calc(24rpx + var(--safe-area-bottom));
		// #endif
	}
	.tab_box{
		position: sticky;
		top: 0;
		z-index: 1;
	}
	.order_type_tab_box {
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 88rpx;
		padding: 0 160rpx;
		box-sizing: border-box;
		border-top: 1px solid #F5F6F7;
	}
	.order_type_tab_head {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 88rpx;
		padding-top: 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	
		.type_text {
			font-weight: 400;
			font-size: 30rpx;
			height: 100%;
			color: #5C5E5E;
			text-align: center;
		}
	
	}
	
	.order_type_tab_head_active {
		.type_text {
			font-weight: bold;
			font-size: 32rpx;
			color: #1B2120;
		}
	
		.active_type {
			bottom: 0;
			width: 44rpx;
			height: 8rpx;
			background: var(--color-primary);
			border-radius: 4rpx;
		}
	}
	.lf {
		display: flex;
	}
	.linehei1{
		line-height: 1;
	}
	.lf-between {
		justify-content: space-between;
	}
	.lf-around {
		justify-content: space-around;
	}
	.lf-center{
		align-items: center;
	}
	.noRecord{
		margin-top: 48%;
		text-align: center;
		font-size: 32rpx;
	}
	.btn-color{
		color: #FF6084;
	}
	.btn-color1{
		color: #6363FF;
	}
	.bank_width{
		width: 85%;
	}
	.content{
		background-color: #fff;
		margin: 32rpx;
		border-radius: 24rpx;
		.list_box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin:0 32rpx;
			padding: 48rpx 0;
			border-bottom: 1rpx solid #E4E6E6;
		}
		.list_text{
			width: 75%;
		}
		.list_box:last-child{
			border-bottom: 0rpx solid;
		}
		.bank_img{
			width: 48rpx;
			height: 48rpx;
			border-radius: 50%;
			margin-right: 18rpx;
		}
		.time_text{
			color: #7C807F;
			font-size: 26rpx;
			margin-top: 16rpx;
		}
		.active_box{
			text-align: right;
		}
	}
	.top_box{
		width: 686rpx;
		height: 160rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 30rpx 32rpx 48rpx 32rpx;
		.center_box{
			width: 1rpx;
			height: 72rpx;
			border-left: 1rpx solid #F5F6F7;
		}
		.top_text{
			color: #5C5E5E;
			font-size: 24rpx;
			text-align: center;
		}
	}
	.all_btn{
		width: 180rpx;
		height: 58rpx;
		line-height: 58rpx;
		text-align: center;
		background: #FEDFE8;
		border-radius: 240rpx;
		color: #FF6084;
		font-size: 26rpx;
	}
	.active_btn{
		width: 180rpx;
		height: 58rpx;
		line-height: 58rpx;
		text-align: center;
		background: #FFFFFF;
		border-radius: 240rpx;
		color: #7C807F;
		font-size: 26rpx;
	}
	.withdrawalList{
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin:0 32rpx 24rpx 32rpx;
		.color_text{
			color: #7C807F;
		}
		.withdrawal_user{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin:0 32rpx;
			border-bottom: 1rpx solid #E4E6E6;
			padding: 42rpx 0 34rpx 0;
		}
		.withdrawal_user_img{
			width: 72rpx;
			height: 72rpx;
			border-radius: 50%;
			margin-right: 16rpx;
		}
		.withdrawal_user_name{
			color: #7C807F;
			font-size: 26rpx;
		}
		.handle_btn{
			width: 160rpx;
			height: 72rpx;
			line-height: 72rpx;
			background: linear-gradient( 90deg, #FF6188 0%, #FF5252 100%);
			border-radius: 62rpx;
			color: #fff;
			text-align: center;
			font-size: 26rpx;
		}
	}
</style>